<template>
  <middle-area-htree>
    <div slot="middle-top" class="left-top">
      <ul>
        <li><a href="#"><h3 >小朋友都喜欢看</h3></a></li>
      </ul>
    </div>
    <div slot="middle-bot" class="left-bot">
      <ul class="ul">
        <li v-for="item,index in datalist" :key="index">
          <div class="card">
            <img :src="item.imgUrl" alt="卡片" width="230px" height="300px">
            <div>
              <div class="card-min-tit">
                <a href="#">{{item.name}}</a>
                <p><strong>{{item.score}}</strong></p>
              </div>
              <p class="card-min-text">{{item.introduction}}</p>
            </div>
          </div>
        </li>       
      </ul>
    </div>
  </middle-area-htree>
</template>

<script>
import {getMovieList} from '@/api/movie'
// import MovieMainOnea from './MovieMainOnea'
export default {
  name:'MovieMainChildes',
  components:{
    // MovieMainOnea
  },
  data(){
    return{
      datalist:[]
    }
  },
  created(){
    getMovieList({}).then(res=>{
      let data = res.data.data
      this.datalist = data.list.slice(0,5)
    })
  }
}
</script>

<style scoped>
  .left-top{
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
  }
  .left-top ul{
    width: 800px;
    margin-left: 40px;
  }
  .left-top ul h3{
    color: rgb(230, 22, 150);
    padding-top: 10px;
    font-weight: 600;
  }
  .left-top p{
    font-size: 15px;
    padding-top: 20px;
    /* margin-left: 20px; */
    color: rgba(100, 100, 100, .7);
  }
   .left-top ul div{
    height: 15px;
    margin-top: 25px;
    border: 1px solid rgba(100, 100, 100, .3);
  }

  .left-bot ul{
    margin-top: 20px;
    display: flex;
    justify-content: space-evenly;
  }
  .ul{
    margin-left: 20px;
    margin-bottom: 0;
    display: flex;
    justify-content: space-evenly;
    overflow: hidden;
  }
  .card{
    width: 230px;
    height: 370px;
    background: rgb(233, 233, 232);
  }
  .card-min-tit{
    height: 35px;
    padding: 5px 10px;
    display: flex;
    justify-content: space-between;
  }
  .card-min-tit a{
    color: #000;
  }
  .card-min-tit a:hover{
    color: rgb(16, 212, 75);
  }
  .card-min-tit p{
    color: rgb(220, 33, 20);
  }
  .card-min-text{
    height: 35px;
    padding: 0 10px;
  }
  .cardright{
    display: flex;
    justify-content: space-evenly;
  }
</style>